<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
    <style>
        .normal {
            border: 1px solid black;
            width: 200px;
            height: 60px;
        }
        
        .bd {
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .bga {
            background-color: cyan;
        }
        
        .bgb {
            background-color: red;
        }
        
        .bgc {
            background-color: yellow;
        }
        
        .bgd {
            background-color: forestgreen;
        }
    </style>
</head>

<body>
    <div class="app">
        <!-- 绑定class -->
        <div class="normal" :class="a" @click="changeEmt">{{name}}</div>
        <br>
        <div class="normal" :class="classarr" @click="changeEmt1">{{name}}</div>
        <br>
        <div class="normal" :class="classObj" @click="changeEmt2">{{name}}</div>
        <br>
        <!-- 绑定style -->
        <div class="normal" :style="styleObj" @click="changeStyObj">{{name}}</div>
    </div>

    <script>
        const vm = new Vue({
            data: {
                name: '名字',
                a: '',
                classarr: [
                    'bga',
                    'bd'
                ],
                classObj: {
                    bd: true,
                    bga: true
                },
                styleObj: {
                    fontSize: '30px'
                }
            },
            methods: {
                changeEmt() {
                    const arr = ['bga', 'bgb', 'bgc', 'bgd']
                    this.a = arr[Math.floor(Math.random() * 4)]
                },
                changeEmt1() {
                    this.classarr.pop()
                },
                changeEmt2() {
                    this.classObj.bd = false
                    this.classObj.bga = false
                },
                changeStyObj() {
                    this.styleObj.fontSize = '60px'
                    this.styleObj.overflow = 'hidden'
                    this.styleObj.backgroundColor = '#CCC'
                }
            }
        })
        vm.$mount('.app')
    </script>
</body>

</html>